<template>

    <div class="login">

        <div class="login-center" id="components-form-demo-normal-login">

            <h2>注册</h2>
            <a-form :model="userFrom" name="normal_login" ref="formRef" class="login-form" :rules="rules"
                @finish="submitSuccess" @validate="handleValidate" @finishFailed="submitErrer">

                <a-form-item label="" name="userAccount">
                    <a-input v-model:value="userFrom.userAccount" autocomplete="current-password" required
                        placeholder="账号">
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item label="" name="userPassword">
                    <a-input-password v-model:value="userFrom.userPassword" autocomplete="current-password" required
                        placeholder="密码">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>
                <a-form-item label="" name="checkPassword">
                    <a-input-password v-model:value="userFrom.checkPassword" autocomplete="current-password" required
                        placeholder="确认密码">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>



                <a-form-item>
                    <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
                        注册
                    </a-button>
                    Ora
                    <a @click="goToLogin">返回登录</a>
                </a-form-item>
            </a-form>



        </div>
    </div>

</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import { useRouter } from "vue-router"
const router = useRouter()
import { ref, reactive, computed } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';

const userFrom = reactive<any>({
    userAccount: '',
    userPassword: '',
    checkPassword: ''
});

const checkUserPassword = async (_rule: Rule, value: number) => {
    if (!value) {
        return Promise.reject('请确认密码');
    }
    if (value != userFrom.userPassword) {
        return Promise.reject('两次密码不一致');
    } else {
        return Promise.resolve();
    }
};

const rules: Record<string, Rule[]> = {
    userAccount: [{ required: true, pattern: /^[a-zA-Z][a-zA-Z0-9_-]*$/, message: '请输入账号(不含特殊字符)', trigger: 'change' },
    { min: 5, max: 10, message: '长度5-10位', trigger: 'blur' },],
    userPassword: [{ required: true, message: '请输入密码', trigger: 'change' },
    { min: 8, max: 15, message: '8-15位', trigger: 'blur' },],
    checkPassword: [{ validator: checkUserPassword, trigger: 'change' }],
};

import { uetRegisterApi } from '../api/user'
const formRef = ref();
//1.成功登录
const submitSuccess = () => {
    formRef.value
        .validate()
        .then(async () => {
            await uetRegisterApi(userFrom)

            message.success('注册成功');
            //注册成功跳到登录
            router.replace({
                path: "/"
            })

        })
        .catch((e: any) => {
            console.log('error', e);
        });
}
const submitErrer = () => {
    console.log("注册失败");
}

//校验
const handleValidate = () => {
    // ...args: any
    // console.log("校验"+args);
};
const disabled = computed(() => {
    return !(userFrom.userAccount && userFrom.userPassword);
});

//跳转到注册页面
const goToLogin = () => {
    router.push({
        path: "/"
    })
}


</script>

<style scoped lang="scss">
.login {

    background-image: linear-gradient(90deg, #f5cdff, #aa97ff, #31e6e6, #b8ffd1, #24c7c7);
    background-size: 400%;
    animation: name 10s infinite;
    width: 100%;
    height: 100%;

    .user {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
        font-weight: bolder;

        // color: #fff;
    }

    .login-center {
        // box-sizing: border-box;
        padding: 40px;
        width: 450px;
        // height: 300px;
        background-color: #ffffff;
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

@keyframes name {
    from {
        background-position: 0% 25%;
    }

    50% {
        background-position: 100% 75%;
    }

    to {
        background-position: 0% 25%;
    }
}

#components-form-demo-normal-login .login-form {
    max-width: 100%;
    //   max-height: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
    float: right;
}

#components-form-demo-normal-login .login-form-button {
    width: 100%;
}
</style>